<template>
  <div class="content">
    <div class="content_form">
      <el-form ref="form" :model="form" label-width="140px" class="form_item" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="用户名" prop="nickName">
              <el-input v-model="form.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户账号" prop="userName">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户编码" prop="userCode">
              <el-input v-model="form.userCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-input v-model="form.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phonenumber">
              <el-input v-model="form.phonenumber"></el-input>
            </el-form-item>
          </el-col>
		  <!--归属部门-->
			<el-col :span="12">
			            <el-form-item label="归属部门" prop="deptId">
			              <treeselect v-model="form.deptId" :options="departmentOptions" placeholder="请选择归属部门" />
			            </el-form-item>
			          </el-col>
		  <!--归属部门-->
		  
		  <!--角色-->
		  <el-col :span="12">
		              <el-form-item label="角色">
		                <el-select v-model="form.roleIds" multiple placeholder="请选择">
		                  <el-option
		                    v-for="item in roleOptions"
		                    :key="item.roleId"
		                    :label="item.roleName"
		                    :value="item.roleId"
		                    :disabled="item.status == 1"
		                  ></el-option>
		                </el-select>
		              </el-form-item>
		            </el-col>
		  <!--角色-->
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken,setToken,removeToken } from '@/utils/auth'
import { userAdd,roles_tree_tree,department_tree_tree} from '@/api/user'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
	
  components: {
	  Treeselect
  },
 
 
  data() {
    return {
        engineering:"",
        engineeringTypeOption:[],
        form:{ 
            nickName: "",
            userName: "",
            userCode :'',     //用户编号
            sex :'',        //用户性别
            email:"",
            password:'',
            phonenumber: "",
			roleIds:"",
			deptId:undefined
            // token : gettoken()
        },
		departmentOptions:[],
		/********角色管理**********/
		roleOptions:[],
		/*******角色管理**********/
        rules: {
            userName: [
            { required: true, message: "请填写内容", trigger: "blur" }
            ],
            password:[
            { required: true, message: "请填写内容", trigger: "blur" }
            ],
        }
        };
    }, 
  created(){
	
    var userList_data = {token:getToken()}
	/*******加载部门***********/
	department_tree_tree().then((response) => {
			if(response.data.code == 200){
				console.log("我是加载树",response)
				 
					 this.departmentOptions=response.data.depts
			}else{
				this.$message.error(response.data.msg);
			}
	}).catch(() => {
		
	})
	/**********部门*********/
	/********加载角色***********/
	roles_tree_tree().then((response) => {
			if(response.data.code == 200){
				console.log("我是加载角色",response)
				 
					 this.roleOptions=response.data.data
			}else{
				this.$message.error(response.data.msg);
			}
	}).catch(() => {
		
	})
	/**********加载角色********/
  },
    methods: {
    
        // 保存
        addSave() {
        var params_one={
            nickName:this.form.nickName,
            userName:this.form.userName,
            userCode:this.form.userCode,
            sex:this.form.sex,
            email:this.form.email,
            password:this.form.password,
            phonenumber:this.form.phonenumber,
			deptId:this.form.deptId,
			roleIds:this.form.roleIds
        }
      
          userAdd(params_one).then((response) => {
			  // console.log("我是增加成功",response);
     //        // console.log(response)
					 if(response.data.code == 200){
						
						  this.$message({
								  message: '新增成功',
								  type: 'success'
							 });
							 
					 }else{
						this.$message.error(response.data.msg);
					 }
                this.$emit("closeModal", false);
          }).catch(() => {
            // this.loading = false
            // this.$message.error(response.data.msg)
          })
            // } else {
            // return false;
            // }
        // });
        },
		/**********部门***********/
		select_department(id){
			this.form.deptId=id
		}
		/********选中部门********/
    },
  props: ["EngineeringData"],
  mounted: function() {
    //异步加载
    // this.form = this.EngineeringData[0];
  },
  watch: {
    EngineeringData() {
      //数据监视
      this.form = this.EngineeringData[0];
    }
  }
};
</script>
<style scoped>
</style>